<template>
  <div class="index">
    <b-modal ref="myWarning" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>{{msg}}</h4>
      </div>
    </b-modal>

    <div class="top3"></div>
    <b-container>
      <div class="div-register">
        <div class="d-block text-center">
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">用户名</b-col>
            <b-col>
              <b-form-input
                v-model="username"
                id="input-user"
                type="text"
                placeholder="3~16位字符"
                maxlength="16"
                :state="nameState"
              ></b-form-input>
            </b-col>
          </b-row>
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">性别</b-col>
            <b-col>
              <b-form-select v-model="gender" :options="options1" :state="genderState" />
            </b-col>
          </b-row>
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">出生日期</b-col>
            <b-col>
              <b-form-input v-model="birthday" id="input-birthday" type="date" placeholder="出生日期"></b-form-input>
            </b-col>
          </b-row>
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">邮箱</b-col>
            <b-col>
              <b-form-input
                v-model="email"
                id="input-email"
                type="text"
                placeholder="必填"
                maxlength="20"
                :state="emailState"
              ></b-form-input>
            </b-col>
          </b-row>
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">微信号</b-col>
            <b-col>
              <b-form-input
                v-model="weixin"
                id="input-weixin"
                type="text"
                placeholder="选填"
                maxlength="20"
              ></b-form-input>
            </b-col>
          </b-row>
          <b-row class="mb-2 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;">密码</b-col>
            <b-col>
              <b-form-input
                v-model="password"
                id="input-pwd1"
                type="password"
                placeholder="4~16位字符"
                maxlength="16"
                :state="pwdState1"
              ></b-form-input>
            </b-col>
          </b-row>
          <b-row class="mb-4 text-left">
            <b-col cols="4" style="padding-top: 5px; font-weight: bold;"></b-col>
            <b-col>
              <b-form-input
                v-model="confirmpwd"
                id="input-pwd2"
                type="password"
                placeholder="再输一遍"
                maxlength="16"
                :state="pwdState2"
              ></b-form-input>
            </b-col>
          </b-row>
          <div slot="modal-footer" class="w-100">
            <b-button
              class="float-center"
              variant="primary"
              size="lg"
              style="width: 150px"
              @click.prevent="register()"
            >注册</b-button>
          </div>
        </div>
      </div>
    </b-container>
  </div>
</template>

<script>
var crypto = require('crypto');

export default {
  data() {
    return {
      msg: '',
      token: '',
      username: '',
      birthday: '1990-01-01',
      gender: 'male',
      email: '',
      weixin: '',
      password: '',
      confirmpwd: '',
      options1: [
        { value: 'male', text: '男' },
        { value: 'female', text: '女' },
      ],
      nameState: null,
      pwdState1: null,
      pwdState2: null,
      genderState: null,
      emailState: null,
    };
  },
  methods: {
    register() {
      if (!this.username) {
        this.msg = '请输入用户名';
        this.nameState = false;
        this.$refs.myWarning.show();
        return;
      }
      if (!this.gender) {
        this.msg = '请选择性别';
        this.genderState = false;
        this.$refs.myWarning.show();
        return;
      }
      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (!this.email) {
        this.msg = '请填写邮箱';
        this.emailState = false;
        this.$refs.myWarning.show();
        return;
      } else if (!regEmail.test(this.email)) {
        this.msg = '邮箱格式不正确';
        this.emailState = false;
        this.$refs.myWarning.show();
        return;
      }
      if (!this.password) {
        this.msg = '请输入密码';
        this.pwdState1 = false;
        this.$refs.myWarning.show();
        return;
      } else if (this.password.length < 4) {
        this.msg = '密码长度小于4';
        this.pwdState1 = false;
        this.$refs.myWarning.show();
        return;
      }
      if (this.confirmpwd != this.password) {
        this.msg = '两次输入密码不一致';
        this.pwdState2 = false;
        this.$refs.myWarning.show();
        return;
      }
      var params = {
        username: this.username,
        password: this.my_md5(this.password),
        birthday: this.birthday,
        gender: this.gender,
        email: this.email,
        weixin: this.weixin,
      };
      this.$axios
        .post('/api/register/', JSON.stringify(params), { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.msg = res.msg;
          this.$refs.myWarning.show();
          if (res.code == 100) {
            localStorage.removeItem('accessToken');
            // 跳转到首页
            setTimeout(() => {
              this.$router.push({
                path: '/login',
              });
            }, 2000);
          } else {
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    my_md5(initPWD) {
      var md5 = crypto.createHash('md5'); //创建哈希加密算法，后边可以是md5, sha1, sha256等
      var password = md5.update(initPWD).digest('base64');
      return password;
    },
  },
  head() {
    return {
      title: '注册 | 英伦留声机',
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    this.$route.meta.title = '注册 | 英伦留声机';
    document.title = this.$route.meta.title;
  },
  watch: {
    username: function(val) {
      if (val.length > 2 && val.length < 17) {
        this.nameState = true;
      } else {
        this.nameState = false;
      }
    },
    password: function(val) {
      if (val.length > 3 && val.length < 17) {
        this.pwdState1 = true;
      } else {
        this.pwdState1 = false;
      }
    },
    confirmpwd: function(val) {
      if (val.length > 3 && val.length < 17) {
        this.pwdState2 = true;
      } else {
        this.pwdState2 = false;
      }
    },
    gender: function(val) {
      if (val) {
        this.genderState = true;
      } else {
        this.genderState = 'null';
      }
    },
    email: function(val) {
      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (regEmail.test(val)) {
        this.emailState = true;
      } else {
        this.emailState = 'null';
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
a.page-link {
  color: #222222;
}
a.page-link:hover {
  color: #999999;
}
a.page-link:active {
  color: #999999;
}
a.page-link:visited {
  color: #222222;
}

a:not([href]):not([tabindex]) {
  color: #222222;
}
</style>

<!--<style src="../assets/css/link.css"></style>
<!--<style src="../assets/css/font.css"></style>
<!--<style src="../assets/css/global.css"></style>

